/**
 * [推荐位(主数据)]列表首页[JS]
 * @returns {*}
 */
var app = function () {

    return new Vue({
        el: '#vueContainer',
        data: {
            loadOver: false,
            settingOver: false,
            detailOver: false, // 详情加载完毕
            setting: {
                pageType: 'index', // 页面类型
            },
            isCollapse: false, // 折叠状态
            deviceType: 'mobile', // 查看类型
            dragEndTime: 0, // 拖拽时间
            menuDefaultKey: '', // 默认点选菜单
            dragIng: false, // 拖拽中
            colButtDragStyle: {}, // 拖拽样式
            category: { // 分类
                setting: {}, // 设置
                settingOver: false, // 设置状态
                list: [], // 列表
            },
            pageUrl: '', // 当前打开页面地址
            pageLoading: false, // 当前打开页面 加载中
            blockForm: {type: ''}, // 碎片表单
            blockError: {}, // 碎片 错误
            showBlockDialog: false, // 展示碎片弹出层
            blockIsAdd: false, // 碎片为添加
            blockTabAct: 'first', // 碎片编辑当前活动选项卡
            dataColumn: {}, // 当前编辑碎片 数据字段
            dataForm: {}, // 当前碎片 数据表单
            disabledPosName: false, // 是否禁止输入标识|一般在模板内有标识，不需要输入
            showTempEditor: false, // 是否展示碎片模板编辑器
            tempEditorKey: 'blockForm.template', // 模板编辑器字段键值
            blockRowIsAdd: false, // 碎片条目是否为添加
            showDataColumnDialog: false, // 是否展示碎片条目弹出
            dataColumnDialog: false, // 数据字段 弹出层展示
            stageColumnData: {}, // 数据字段 暂存数据条目类型 - 锁头编辑均操作此变量，最终提交赋值
            dataRawUpLoading: false,
            blockRowForm: {}, // 碎片数据条目[form]数据
            pageDialog: {
                show: false,    // 页面 - 是否展示弹出层
                url: '',        // 页面 - 弹出层连接
                loading: false, // 页面 - 弹出层加载中
                isIframe: false // 页面 - 是否[iframe]嵌入
            },
        },
        created: function () {
            // 初始化
            this.init();
            // 初始化碎片表单
            this.initBlockForm();
            // 加载配置
            this.getSetting();
            // 加载分类设置 + 分类列表
            this.getCategorySetting();
            var that = this;
            this.$nextTick(function () {
                that.loadOver = true;
                that.initMainScroll();
            });
        },
        methods: {
            /**
             * 初始化的逻辑
             */
            init: function () {

            },
            /**
             * 初始化滚动条
             */
            initMainScroll: function () {
                var shadowDom = this.$refs['mainScrollShadow'];
                if (!shadowDom) return false;
                this.$refs.mainScroller.wrap.onscroll = function ($event) {
                    var opacity = 0;
                    opacity = $event['srcElement']['scrollTop'] / 100;
                    opacity = opacity > 0.6 ? 0.6 : opacity
                    shadowDom['$el']['style']['box-shadow'] = '0 5px 15px 0 rgb(204, 204, 204, ' + opacity + ')';
                };
            },
            /**
             * 获取分类设置
             */
            getCategorySetting: function () {
                // 正在加载...
                var loadingInstance = ELEMENT.Loading.service({
                    fullscreen: false,
                    text: '加载中...',
                    customClass: 'z-index-top'
                });
                var that = this;

                // 获取各模块的值
                $w.request({
                    url: $w.getApiUrl('newsCategory.setting'),
                    type: 'get',
                    data: {
                        type: 'form' // 表单页
                    },
                    dataType: 'json',
                    afterCallback: function () {
                        that.$nextTick(function () {
                            // 设置加载完毕
                            that.category.settingOver = true;
                            // 获取下分类列表
                            that.getCategory([], 'INIT');
                            // 隐藏正在加载
                            loadingInstance.close();
                        });
                    },
                    callback: function (event) {

                        // 失败的返回|提示
                        if (parseInt(event.no) !== 200) {

                            return that.$message({
                                showClose: true,
                                type: 'error',
                                message: event.msg ? event.msg : '操作失败，请稍后尝试'
                            });
                        }

                        // 挨个赋值[setting]中
                        for (var i in event.data) {
                            if (!event.data.hasOwnProperty(i)) continue;
                            that.$set(that.category.setting, i, event.data[i]);

                            // 改变键值
                            if (i.indexOf('_list') !== -1) {
                                that.category.setting[i] = $w.array_index(event.data[i],
                                    'key'
                                );
                            }
                        }
                    }
                });
            },
            /**
             * 获取分类列表
             * @param $option 选项
             * @param $resolve 方法
             * @returns {boolean}
             */
            getCategory: function ($option, $resolve) {

                // 设置未完毕不操作
                if (!this.category.settingOver) return false;
                // 正在加载...
                var loadingInstance = ELEMENT.Loading.service({
                    fullscreen: false,
                    text: '加载中...',
                    customClass: 'z-index-top'
                });
                var that = this;

                var parentId = 0;
                if ($option.data && $option.data.id) {
                    parentId = $option.data.id;
                }

                // 获取各模块的值
                $w.request({
                    url: $w.getApiUrl('newsCategory.list'),
                    type: 'get',
                    data: {
                        search: {
                            parent_id: parentId,
                            status: this.category.setting.status_list.open.value
                        },
                        option: {
                            load_has_child: true
                        }
                    },
                    dataType: 'json',
                    afterCallback: function () {
                        that.$nextTick(function () {
                            // 隐藏正在加载
                            loadingInstance.close();
                        });
                    },
                    callback: function (event) {

                        // 失败的返回|提示
                        if (parseInt(event.no) !== 200) {

                            return that.$message({
                                showClose: true,
                                type: 'error',
                                message: event.msg ? event.msg : '操作失败，请稍后尝试'
                            });
                        }

                        for (i in event.data.list) {
                            if (!event.data.list.hasOwnProperty(i)) continue;

                            // 是否为文件夹或者子集
                            event.data.list[i]['leaf'] = true;
                            if (event.data.list[i]['had_children']) {
                                that.$set(event.data.list[i], 'children', []);
                                event.data.list[i]['leaf'] = false;
                            }
                        }

                        // 初次加载赋值
                        if ($resolve === 'INIT') {
                            return that.category.list = $w.eachAdd([{
                                id: -1,
                                name: '首页',
                                parent_id: '0',
                                url: '/',
                                sort: '0',
                                status: '1',
                                detail_page: false,
                                leaf: true,
                                had_children: false
                            }], event.data.list);
                        }
                        // 重新加载
                        else if ($resolve === 'RELOAD') {
                            // 必须先清空当前子集
                            that.$set($option, 'childNodes', []);
                            // 赋值子集数据
                            return that.$set($option.data, 'children', event.data.list);
                        }
                        // 检测如果子集没有则当前等级改为最低级 - 直接结束
                        if (!event.data.list || event.data.list.length < 1) {
                            that.$set($option.data, 'leaf', true);
                            that.$delete($option.data, 'children');
                            return $resolve([]);
                        }
                        // 默认加载子集
                        return $resolve(event.data.list);
                    }
                });
            },
            /**
             * 获取分类设置
             */
            getSetting: function () {
                // 正在加载...
                var loadingInstance = ELEMENT.Loading.service({
                    fullscreen: false,
                    text: '加载中...',
                    customClass: 'z-index-top'
                });
                var that = this;

                // 获取各模块的值
                $w.request({
                    url: $w.getApiUrl('block.setting'),
                    type: 'get',
                    data: {
                        type: 'form' // 表单页
                    },
                    dataType: 'json',
                    afterCallback: function () {
                        that.$nextTick(function () {
                            // 设置加载完毕
                            that.settingOver = true;
                            // 隐藏正在加载
                            loadingInstance.close();
                        });
                    },
                    callback: function (event) {

                        // 失败的返回|提示
                        if (parseInt(event.no) !== 200) {

                            return that.$message({
                                showClose: true,
                                type: 'error',
                                message: event.msg ? event.msg : '操作失败，请稍后尝试'
                            });
                        }

                        // 挨个赋值[setting]中
                        for (var i in event.data) {
                            if (!event.data.hasOwnProperty(i)) continue;
                            that.$set(that.setting, i, event.data[i]);

                            // 改变键值
                            if (i.indexOf('_list') !== -1) {
                                that.setting[i] = $w.array_index(event.data[i], 'key');
                            }

                            // 默认值
                            if (i.indexOf('default_') !== -1 && that.setting.isCreate) {
                                that.form[i.replace('default_', '')] = that.setting[i];
                            }
                        }

                        // 监测屏幕大小变化
                        return $(window).resize(function () {
                            // 超过此宽度展示 更多筛选
                            var bodyDom = document.getElementsByTagName('body');
                            if (bodyDom[0] &&
                                bodyDom[0].clientWidth <= that.setting.smallScreenWidth
                            ) {
                                return that.setting.isSmallScreen = true;
                            }
                            return that.setting.isSmallScreen = false;
                        }).resize();
                    }
                });
            },
            /**
             * 去首页
             */
            goToIndex: function () {
                // 父级
                var parent = window.parent.top;
                if (!parent) return false;

                // 父级[vue]对象
                var vueInstance = parent.instance;
                if (!parent || !(typeof vueInstance === 'object')) return false;

                // 键值
                var key = vueInstance.tab.indexKey;
                // 操作点击
                $(parent.document).find('#tab-' + key).click();
            },
            /**
             * 缩小左侧菜单
             */
            collapse: function () {
                // 当前时间
                var nowTime = new Date().getTime();
                // 当前时间 - 拖拽结束时间
                if (nowTime - this.dragEndTime <= 200) return false;
                this.isCollapse = !this.isCollapse;
            },
            /**
             * 菜单选择改变
             * @param $node
             * @param $action
             */
            changeSelMenu: function ($node, $action) {

                this.pageLoading = true;
                // 否则渲染专用页面
                this.pageUrl = $w.getPageUrl('block.renderPage', {
                    id: $node.id,
                    is_iframe: 1,
                    render_detail: $action === 'detail' ? 1 : 0,
                    render_url: parseInt($node.id) === -1 ? $node.url : '',
                    random: $w.getRandStr(20),
                    device: this.deviceType
                });

                // [IFRAME]加载完毕
                var that = this;
                var iframe = $("#pageIframe");
                iframe.load(function () {
                    // 页面加载中 否
                    that.pageDialog.loading = false;
                });
            },
            /**
             * 展开收缩按钮的拖拽开始
             */
            collapseDragStart: function ($event) {

                // 当前非移动中
                if (!this.dragIng) return false;

                var leftWidth = $('.block-left').width();
                this.colButtDragStyle = {
                    left: ($event['x'] - leftWidth - 15) + 'px',
                    top: ($event['y'] - 60) + 'px'
                };

                // 当前拖拽时间
                this.dragEndTime = new Date().getTime();
            },
            /**
             * 初始化碎片表单数据
             */
            initBlockForm: function () {
                this.blockForm = {
                    name: '',
                    pos: '',
                    type: '',
                    limit: this.setting.default_limit ? this.setting.default_limit : 1,
                    template: ''
                };
            },
            /**
             * 添加碎片按钮点击
             */
            addBlock: function ($posName) {

                // 清空编辑器
                // this.clearEditor();
                // 默认TAB打开的第一个选项卡
                // this.blockTabAct = 'first';

                var that = this;
                this.$nextTick(function () {

                    // 初始化[BLOCK FORM]
                    that.initBlockForm();

                    if ($posName) {

                        that.$set(that.blockForm, 'pos', $posName);
                        that.disabledPosName = true;
                    } else {
                        that.disabledPosName = false;
                    }

                    // 添加赋值默认字段信息
                    that.dataColumn = [
                        {name: 'title', title: '标题', type: 'string'},
                        {name: 'url', title: '链接', type: 'url'},
                        {name: 'description', title: '概述', type: 'string'},
                        {name: 'image', title: '图片', type: 'image'}
                    ];
                    // 默认数据条目为空
                    that.dataForm = [];

                    // 添加赋值默认数据条目
                    that.stageColumnData = [];
                    // 展示碎片弹出层
                    that.showBlockDialog = true;
                    // 为添加
                    that.blockIsAdd = true;
                    // 错误为空
                    that.blockError = {};
                    that.detailOver = true; // 详情加载完毕
                });
            },
            /**
             * 编辑碎片
             * @param $posId
             */
            editBlock: function ($posId) {

                if (!$posId || $posId.length < 1) {
                    console.error('碎片编号为空：' + $posId);
                    return this.$message({
                        type: 'error',
                        showClose: true,
                        message: '碎片暂时无法编辑，请联系管理员'
                    });
                }

                // 类型还原
                this.blockForm.type = null;

                // 编辑模式赋值
                this.blockIsAdd = false;

                // 正在加载。。
                var loadingInstance = ELEMENT.Loading.service({
                    fullscreen: false,
                    text: '获取中...',
                    customClass: 'z-index-top'
                });
                var that = this;

                this.setting.isAdd = false; // 正在修改

                // 获取各模块的值
                $w.request({
                    url: $w.getApiUrl('block.detail'),
                    type: 'get',
                    data: {id: $posId},
                    dataType: "json",
                    afterCallback: function () {
                        that.$nextTick(function () {
                            // 隐藏正在加载
                            loadingInstance.close();
                            that.detailOver = true; // 详情加载完毕
                        });
                    },
                    callback: function (event) {

                        // 失败的返回|提示
                        if (parseInt(event.no) !== 200) {

                            return that.$message({
                                showClose: true,
                                type: 'error',
                                message: event.msg ? event.msg : '操作失败，请稍后尝试'
                            });
                        }

                        // 展示弹出层
                        that.showBlockDialog = true;
                        // 碎片数据条目[FORM]
                        that.dataForm = event.data.data;
                        // 碎片字段[FORM]
                        that.dataColumn = event.data.data_column;
                        that.$nextTick(function () {
                            // 碎片[FORM]
                            that.$set(that, 'blockForm', event.data);
                            // 清空错误信息
                            that.blockError = {};
                        });
                    }
                });
            },
            /**
             * 点击添加[数据条目]按钮
             */
            addDataRaw: function () {
                // 检测当前数据条目 是否已经是等于最大的条目数
                if (parseInt(this.blockForm.limit) <= this.dataForm.length) {
                    return this.$message({
                        showClose: true,
                        type: 'error',
                        message: '数据已经有' +
                            this.dataForm.length +
                            '条了，如需再次添加请修改条目最大数量'
                    });
                }
                this.blockRowForm = {};
                var item;
                for (var i in this.dataColumn) {
                    if (!this.dataColumn.hasOwnProperty(i)) continue;
                    item = this.dataColumn[i];
                    if (item['type'] === this.setting.data_type_list.integer.value) {
                        this.$set(this.blockRowForm, item['name'], 0);
                        continue;
                    }
                    this.$set(this.blockRowForm, item['name'], null);
                }

                this.blockRowKey = false;         // 当前操作的键值(添加否)
                this.blockRowIsAdd = true;        // 是添加
                this.showDataColumnDialog = true; // 展示弹出层
            },
            /**
             * 编辑碎片数据信息
             */
            editDataRaw: function ($index) {

                if (!this.dataForm.hasOwnProperty($index)) {
                    return this.$message({
                        type: 'error',
                        showClose: true,
                        message: '找不到这条数据'
                    });
                }
                this.$set(this, 'blockRowForm',
                    $w.dataNoBind(this.dataForm[$index]));
                this.blockRowKey = $index; // 当前操作的键值(添加否)
                this.blockRowIsAdd = false; // 是 修改
                this.showDataColumnDialog = true; // 展示弹出层
            },
            /**
             * 删除碎片 数据条目
             */
            delDataRaw: function ($index) {
                if (!this.dataForm[$index]) {
                    return this.$message({
                        showClose: true,
                        type: 'success',
                        message: '条目已经删除'
                    });
                }
                var that = this;
                this.$confirm('此操作将[删除]所选数据条目, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {

                    that.$delete(that.dataForm, $index);
                    return that.$message({
                        showClose: true,
                        type: 'success',
                        message: '删除成功，最终保存后生效'
                    });
                });
            },
            /**
             * 条目数据 上移
             * @param $index
             */
            dataRowUp: function ($index) {

                if ($index <= 0) {
                    return this.$message({
                        type: 'error',
                        showClose: true,
                        message: '已经到顶了'
                    });
                }

                var stage = $w.dataNoBind(this.dataForm);
                //在上一项插入该项
                stage.splice($index - 1, 0, (stage[$index]));
                //删除后一项
                stage.splice($index + 1, 1);

                // 提交更改
                this.$set(this, 'dataForm', stage);
            },
            /**
             * 条目数据 下移
             * @param $index
             */
            dataRowDown: function ($index) {
                if ($index === (this.dataForm.length - 1)) {
                    return this.$message({
                        type: 'error',
                        showClose: true,
                        message: '已经到底了'
                    });
                }

                var stage = $w.dataNoBind(this.dataForm);
                // 在下一项插入该项
                stage.splice($index + 2, 0, (stage[$index]));
                // 删除前一项
                stage.splice($index, 1);

                // 提交更改
                this.$set(this, 'dataForm', stage);
            },
            /**
             * 编辑字段
             */
            editRwoColumn: function () {

                // 数据条目信息
                this.stageColumnData = $w.dataNoBind(this.dataColumn);
                // 数据条目弹出层
                this.dataColumnDialog = true;
            },
            /**
             * 提交编辑碎片
             */
            submitBlock: function () {

                // 提交前走一个逻辑：如果类型为静态文本数量为空默认设置为0
                if (this.blockForm.type === this.setting.type_list.listHtml.value &&
                    !this.blockForm.limit) {
                    this.blockForm.limit = 0;
                }

                var that = this;
                this.$refs['blockForm'].validate(function (valid, msg) {

                    // 验证不过
                    if (!valid) {
                        return that.$message({
                            showClose: true,
                            type: 'error',
                            message: '信息不全，请完善条目'
                        });
                    }

                    // 是否越出范围值 大于
                    if (parseInt(that.blockForm.limit) > parseInt(that.setting.maxLimit)) {

                        that.$message({
                            showClose: true,
                            type: 'error',
                            message: '展示条数最大不得超过 ' + that.setting.maxLimit
                        });

                        return that.$set(that.blockError, 'limit',
                            '展示条数最大不得超过 ' + that.setting.maxLimit);
                    }

                    // 是否越出范围值 小于
                    if (parseInt(that.blockForm.limit) < parseInt(that.setting.minLimit)) {

                        that.$message({
                            showClose: true,
                            type: 'error',
                            message: '展示条数最小不得少于 ' + that.setting.minLimit
                        });

                        return that.$set(that.blockError, 'limit',
                            '展示条数最小不得少于 ' + that.setting.minLimit);
                    }

                    var blockForm = that.blockForm;
                    // 赋值碎片数据条目
                    blockForm['data'] = that.dataForm;
                    // 赋值碎片数据字段
                    blockForm['data_column'] = that.dataColumn;
                    // 取出模板内容
                    if (blockForm['type'] === that.setting.type_list.html.value) {
                        // 类型是[静态文本]
                        blockForm['template'] = that.$refs['html_editor'].getEditorHtml();
                    } else {
                        // 类型是[模板渲染]
                        blockForm['template'] = that.$refs['code_html_editor'].getCodeEditorValue();
                    }

                    // 连接
                    var url = that.setting.isCreate ?
                        $w.getApiUrl('block.create') :
                        $w.getApiUrl('block.update');

                    // 正在加载。。
                    var loadingInstance = ELEMENT.Loading.service({
                        fullscreen: false,
                        text: '正在提交...',
                        customClass: 'z-index-top'
                    });

                    // 获取各模块的值
                    $w.request({
                        url: url,
                        type: 'POST',
                        data: blockForm,
                        dataType: "json",
                        afterCallback: function () {
                            that.$nextTick(function () {
                                // 隐藏正在加载
                                loadingInstance.close();
                                // 重新加载
                                that.pageReload();
                            });
                        },
                        callback: function (event) {

                            // 失败的返回|提示
                            if (parseInt(event.no) !== 200) {

                                for (var i in event.data.columnError) {
                                    if (!event.data.columnError.hasOwnProperty(i))
                                        continue;
                                    that.$set(that.blockError, i, event.data.columnError[i]);
                                }

                                return that.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: event.msg ? event.msg : '操作失败，请稍后尝试'
                                });
                            }

                            // 关闭弹出
                            that.showBlockDialog = false;
                        }
                    });
                });
            },
            /**
             * 代码编辑器中叠加一次循环代码
             */
            addEachCode: function () {

                if (!this.$refs['code_html_editor']) return false;
                // 左侧定界符
                var left = this.setting.left_delimiter;
                // 右侧定界符
                var right = this.setting.right_delimiter;
                var eachCode =
                    "\r" + left + "foreach from=$data key=$key item=$value" + right +
                    "   \r\n" +
                    "   \r\n" +
                    left + "/foreach" + right;
                console.log(eachCode);
                // 赋值内容
                this.$refs['code_html_editor'].codeEditorAppendContent(eachCode);
            },
            /**
             * 碎片数据条目 提交点击
             */
            submitBlockData: function () {

                // 键值为否或者键值不在列表中 - 添加
                if ((!this.blockRowKey + '' && this.blockRowKey.length < 1) ||
                    !this.dataForm.hasOwnProperty(this.blockRowKey)
                ) {

                    this.dataForm.push($w.dataNoBind(this.blockRowForm));
                } else { // 更新

                    this.$set(this.dataForm, this.blockRowKey, this.blockRowForm);
                }

                this.blockRowKey = false; // 清空[KEY]
                this.showDataColumnDialog = false; // 隐藏弹出层
            },
            /**
             * 提交字段的修改
             */
            submitBlockColumn: function () {

                // 先赋值字段数据
                this.dataColumn = $w.dataNoBind(this.stageColumnData);

                var column = null, formData = null, stageRow = [],
                    stageData = $w.dataNoBind(this.dataForm) // 暂存条目，方便渲染删除字段
                ;

                // ********* 先循环需要增加的字段 **********
                for (var i in stageData) {
                    if (!stageData.hasOwnProperty(i)) continue;

                    // 此为当前数据条目
                    formData = stageData[i];
                    stageRow = {};
                    for (var x in this.dataColumn) {
                        if (!this.dataColumn.hasOwnProperty(x)) continue;

                        // 此为当前字段条目
                        column = this.dataColumn[x];
                        // 如果有此字段 取原值加入即可
                        if (formData.hasOwnProperty(column['name'])) {

                            // 存储下当前数据条重新渲染内容
                            this.$set(stageRow, column['name'],
                                formData[column['name']]);
                            continue;
                        }

                        // 条目为无此字段 - 增加
                        this.$set(stageRow, column['name'], null);
                    }

                    // 赋值此行数据
                    stageData[i] = $w.dataNoBind(stageRow);
                }

                this.dataForm = stageData;
                // 隐藏框框
                this.dataColumnDialog = false;
            },
            /**
             * 添加一个新字段
             */
            addDataColumn: function () {
                this.stageColumnData.push(
                    {name: '', title: '', type: ''}
                );
            },
            /**
             * 重置还原
             */
            resetRwoColumn: function () {

                var that = this;

                this.$confirm('此操作将重置字段数据丢，失您所做的字段修改(保存后生效), 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {

                    that.stageColumnData = that.dataColumn;
                });
            },
            /**
             * 字段上移
             * @param $index
             */
            columnRowUp: function ($index) {

                if ($index <= 0) {
                    return this.$message({
                        type: 'error',
                        showClose: true,
                        message: '已经到顶了'
                    });
                }

                var stage = $w.dataNoBind(this.stageColumnData);
                //在上一项插入该项
                stage.splice($index - 1, 0, (stage[$index]));
                //删除后一项
                stage.splice($index + 1, 1);

                // 提交更改
                this.$set(this, 'stageColumnData', stage);
            },
            /**
             * 字段下移
             * @param $index
             */
            columnRowDown: function ($index) {
                if ($index === (this.stageColumnData.length - 1)) {
                    return this.$message({
                        type: 'error',
                        showClose: true,
                        message: '已经到底了'
                    });
                }

                var stage = $w.dataNoBind(this.stageColumnData);
                // 在下一项插入该项
                stage.splice($index + 2, 0, (stage[$index]));
                // 删除前一项
                stage.splice($index, 1);

                // 提交更改
                this.$set(this, 'stageColumnData', stage);
            },
            /**
             * 删除字段信息
             */
            delDataColumn: function ($index) {
                var that = this;

                // 字段不存在
                if (!this.stageColumnData.hasOwnProperty($index)) {
                    return this.$message({
                        type: 'success',
                        showClose: true,
                        message: '字段已经删除'
                    });
                }

                this.$confirm('此操作将删除字段(保存后生效), 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {

                    that.$delete(that.stageColumnData, $index);
                });
            },
            /**
             * 当前页面 重新加载
             */
            pageReload: function () {
                this.pageLoading = true;
                this.pageUrl = this.pageUrl + '&time=' + Math.random(1.999998884);

                // [IFRAME]加载完毕
                var that = this;
                var iframe = $("#pageIframe");
                iframe.load(function () {
                    // 页面加载中 否
                    that.pageLoading = false;
                });
            },
            /**
             * 关闭碎片信息编辑窗口
             */
            closeBlockDialog: function () {
                // 普通[HTML]文本
                if (this.blockForm.type === this.setting.type_list.html.value) {

                    // 销毁实例
                    this.$refs['html_editor'].destroyEditor(this.tempEditorKey);
                } else if (this.blockForm.type === this.setting.type_list.listHtml.value) {

                    // 销毁代码编辑器容器
                    this.$refs['code_html_editor'].destroyCodeEditor(this.tempEditorKey);
                }
            },
            /**
             * 设备改变
             */
            deviceChange: function () {
                // 页面连接是空的不操作
                if ($w.isEmpty(this.pageUrl)) return false;

                // 页面加载中
                this.pageLoading = true;
                this.pageUrl = this.pageUrl + '&device=' + this.deviceType;

                var that = this;
                var iframe = $("#pageIframe");
                iframe.load(function () {
                    // 页面加载中 否
                    that.pageLoading = false;
                });
            }
        },
        watch: {
            /**
             * 碎片类型改变
             * @param $val
             */
            'blockForm.type': function ($val) {

                if (!this.settingOver) return false;
                var stageContent = '';
                var that = this;

                // 普通[HTML]文本
                if (+$val === +this.setting.type_list.html.value) {

                    // 展示碎片模板编辑器
                    this.showTempEditor = true;

                    // 否则赋值详情值
                    // stageContent = this.blockForm.template;

                    // 页面渲染完毕加载
                    this.$nextTick(function () {

                        // 销毁代码编辑器容器
                        that.$refs['html_editor'].destroyEditor();
                        // 文本编辑器 内容
                        that.$refs['html_editor'].initEditor(that.blockForm.template);
                    });
                } else if (+$val === +this.setting.type_list.listHtml.value) {

                    // 不展示碎片模板编辑器
                    this.showTempEditor = false;

                    // 获取下内容后边赋值
                    // stageContent = that.$refs['html_editor'].getEditorHtml();
                    // stageContent = !stageContent ? this.blockForm.template : stageContent;

                    // 销毁实例
                    // that.$refs['html_editor'].destroyEditor();

                    this.$nextTick(function () {

                        // 销毁代码编辑器容器
                        that.$refs['code_html_editor'].destroyCodeEditor();
                        // 文本编辑器 内容
                        that.$refs['code_html_editor'].initCodeEditor(that.blockForm.template);
                    });
                }

                // 内容暂存写入缓存
                if (stageContent && stageContent.length > 0) {
                    var key = 'blockTemplate';
                    var cacheList = $w.getCache(key);
                    cacheList = !cacheList ? [] : cacheList;
                    cacheList.push({
                        time: $w.formatDate(new Date(), 'Y-m-d H:i:s'),
                        type: $val,
                        template: stageContent
                    });
                    cacheList = cacheList.slice(cacheList.length - 100, cacheList.length);
                    $w.setCache(key, cacheList);
                }
            },
            /**
             * 监测页面加载中
             * @param $val
             */
            'pageLoading': function ($val) {
                // 未加载中||已经有计时器 不操作
                if (!$val || this.timer) return false;
                var that = this;
                this.timer = setTimeout(function () {
                    that.pageLoading = false; // 加载完毕
                    clearTimeout(that.timer); // 清除计时器
                    that.timer = null;        // 清空变量存储
                }, 1000)
            }
        },
        computed: {
            blockFormRule: function () {
                if (!this.detailOver) return {};
                return {
                    name: [
                        {required: true, message: '请填写名称', trigger: 'blur'}
                    ],
                    pos: [
                        {required: true, message: '请到模板完善标识', trigger: 'blur'}
                    ],
                    type: [
                        {required: true, message: '请选择类型', trigger: 'change'}
                    ],
                    limit: [
                        {required: true, message: '请填写展示条目数量', trigger: 'blur'}
                    ]
                };
            }
        }
    });
};
